<template>
	<view class="container">
		<!-- 头部 -->
		<view class="header">
			<view class="headerinfo flex textHd"  @click="navtoCity">
				<view class="iconfont inview icon-location"></view>
				<view class="">{{this.locationCity}}</view>
				<view class="triangle"></view>
			</view>
		</view>
		<!-- 轮播图 -->
		<view class="barner flex flexCen">
			<u-swiper class="swiper" :list="barner" height="300" ></u-swiper>
		</view>
		<!-- 导航栏 -->
		<view class="navigateList flex flexBei">
			<view class="navigateItem flex flexCen " v-for="(item, index) in navigateList" :key="index" @click="tabNavto(index)">
				<view class="">
					<image :src="item.url" ></image>
					<view class="title">{{item.title}}</view>
				</view>
			
			</view>
		</view>
		<!-- 内容 -->
		<view class="content">
			<view class="tabs" :class="{ tabsFixed: (this.scrollTop > 300)}">
				<u-tabs :list="tabList" :bar-width="100" :is-scroll="false" :active-item-style="{'color':'#b22726'}" :bar-style="{'backgroundColor': '#b22726'}" :current="current" @change="changeTable"></u-tabs>
			</view>
			<view class="scene" v-show="(current == 0)">
				<SceneList :list="sceneList"></SceneList>
				<u-empty mode="list" text="数据为空" marginTop="240" v-show="(this.sceneList.length == 0)"></u-empty>
			</view>
			<view class="poverty"  v-show="(current == 1)">
				<FoodList :list="shopList" :tag="false"></FoodList>
				<u-empty mode="list" text="数据为空" marginTop="240" v-show="(this.shopList.length == 0)"></u-empty>
			</view>
			
		</view>
		<!-- 提示 -->
		<u-toast ref="uToast"></u-toast>
		<view class="backTop" @click="backTop" v-show="(this.scrollTop > 400)">
			<u-icon size="40" name="arrow-upward"></u-icon>
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	import SceneList from '../../components/scene.vue'
	import FoodList from '../../components/foodList.vue'
	
	import { gethostscene, searchscenic } from '../../api/scenic.js'
	import { getGoodList } from '../../api/store.js'
	import { getwechatUrl, getwechatinfo, getuserinfo} from '../../api/user.js'
	export default {
		data() {
			return {
				 navigateList: [
					{
					  	url: '../../static/images/medical.png',
					  	title: '红医'
					},
					{
					  	url: '../../static/images/tutechan.png',
					  	title: '特产'
					},
					{
					  	url: '../../static/images/meishi.png',
					  	title: '美食'
					},
					{
					  	url: '../../static/images/fupin.png',
					  	title: '扶贫'
					}
					  ],
					tabList: [{
					  	name: '热门景点'
					  	}, {
					  	name: '土特产'
					  	}],
					current: 0,
					scrollTop: 0,
					shopList: [],
					barner: [],
					sceneList: [],
					Sceneparams: {
						city: '',
						pageNum: 1,
						pageSize: 6
						 
			        },
					Shopparams: {
					    name: '',
					    place: '',
					    pageNum: 1,
					    pageSize: 6
					},
			}
		},
		onShow() {
			this.getShopList()
			this.getSceneList()
		},
		onLoad() {
			const code = this.getUrlCode('code')
			if (code) {
				if (this.$store.state.loginstatus) {
					return 
				} else {
				   this.getUserInfo(code)
				}
			}
		},
		mounted() {
			this.getBarnner()
		},
		computed: {
			...mapState(['locationCity'])
		},
		components:{
			SceneList,
			FoodList
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
		onReachBottom() {
			if (this.current == 0) {
				this.getMoreScene()
			} else {
				this.getMoreShop()
			}
		},
		methods: {
			// 获取土特产
			async getShopList () {
				this.Shopparams.place = this.locationCity
				const res = await getGoodList(this.Shopparams)
				this.shopList = res.data.data.data || []
			},
			// 获取热门景点数据
			async getSceneList () {
				this.Sceneparams.city = this.locationCity
				const res = await gethostscene(this.Sceneparams)
				this.sceneList = res.data.data.data || []
			},
			// 获取轮播图
			async getBarnner () {
				const params = {scenicName: '', pageNum: 1, pageSize: 3}
				const res = await searchscenic(params)
				this.barner = res.data.data.data.map((item, index) => item = item.scenicPicture1) || []
			},
          // 导航栏跳转
           tabNavto (index) {
          		if (index == 0) {
          			this.navtoMedical()  
          		  } else if (index == 3) {
          			  this.navtoPoverty()
          		  } else if (index == 1){
          			this.navtoLocal()
          		} else {
          			this.navtoDelicous()
          		}
          },
		  // 获取更多的热门景区
		  async getMoreScene () {
			 this.Sceneparams.pageNum ++
			 const  res = await gethostscene(this.Sceneparams)
			  if (res.data.data.data.length === 0) {
				this.$refs.uToast.show({
                    position: 'top',
					title: '没有更多数据了'
				})
			  } else {
				  this.sceneList = [...this.sceneList, ...res.data.data.data] || [] 
			  }
		  },
		  // 获取更多土特产
		  async getMoreShop () {
			   this.Shopparams.pageNum ++
			   const res = await getGoodList(this.Shopparams)
			   if (res.data.data.data.length === 0) {
			   		this.$refs.uToast.show({
						 positiob: 'top',
			   			title: '没有更多数据了'
			   		})
			   } else {
			   		this.shopList = [...this.shopList, ...res.data.data.data] || []
			   }
			 
		  },
		  // 返回顶部
		  backTop () {
			 this.scrollTop = 0
			 uni.pageScrollTo({
			 scrollTop: 0, //距离页面顶部的距离
			 duration: 300
			 }); 
		  },
		  // 跳转到城市选择
		  navtoCity () {
			  uni.navigateTo({
			  	url: '../city/city'
			  })
			},
		  // 跳转到美食页面
		  navtoDelicous () {
		  	uni.navigateTo({
		  		url: '../food_find/food_find'
		  	}) 
		  },
		  // 跳转到土特产页面
		  navtoLocal () {
		  	uni.navigateTo({
		  		url: '../local_specialty/local_specialty'
		  	})  
		  },
		  // 跳转至扶贫栏目
		  navtoPoverty () {
			  this.$refs.uToast.show({
			  	 positiob: 'top',
			  	title: '该模块还未开放'
			  })
		  	 // uni.navigateTo({
		  		// url: '../poverty/poverty'
		  	 // })
		  },
		  // 跳转至景点tab栏
		  navtoMedical () {
		  	uni.navigateTo({
		  		url: '/pages/medical/medical'
		  	});
		  },
		  // 改变导航栏
		  changeTable (index) {
			  this.current = index
		  },
		  // 登录获取信息
		  async getUserInfo (code) {
		  		const res = await getwechatinfo(code)
		  		if ( res.data.code != 200 && !uni.getStorageSync('userinfo')) {
		  			this.$refs.uToast.show({
		  				type: 'error',
		  				title: '数据获取失败，重新登录'
		  			})
		  				this.getUrl()
		  		} else {
		  			const userId = res.data.data.userId
		  			this.$store.commit('setStatus', true)
		  			this.$store.dispatch('getUserInfo', userId)
		  		}	
		  },
		  // 获取code
		  getUrlCode (name) {
		  	let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
		  			let r = window.location.search.substr(1).match(reg);
		  			if (r != null) {
		  				return unescape(r[2]);
		  			}
		  			return null
		  },
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: $pageback-color;
		min-height: 100vh;
	}
	/* 头部 */
	.header {
		background-color: $theme-color;
		height: 260rpx;
		width: 100%;
		color: #fff;
		.headerinfo {
			padding: 0 18rpx;
			line-height: 102rpx;
			align-items: center;
			.iconfont {
				font-size: 42rpx;
				padding-right: 18rpx;
			}
			.triangle {
				margin-left: 12rpx;
				width:0;
				height:0;
				overflow:hidden;
				border-left:12rpx solid transparent;
				border-right:12rpx solid transparent;
				border-top:12rpx solid #fafafa;
				cursor: pointer;
			}
		}
	}
	/* 轮播图 */
	.barner {
	width: 720rpx;
	border-radius: 22rpx;
	background-color: #fff;
	height: 300rpx;
	margin: -160rpx auto 0 auto;
	box-shadow: 0 12rpx 12rpx #f0f0f0;
	border-color: #f0f0f0;
	.swiper {
		width: 720rpx;
		margin: 0 auto;
	    border-radius: 22rpx !important;
		border-color: #f0f0f0;
	}
}
/* 导航栏 */
.navigateList {
	padding: 18rpx 24rpx;
	width: 700rpx;
	margin:18rpx auto 0 auto;
	background-color: #fff;
	justify-content: space-around;
	border-radius: 18rpx;
	.navigateItem {
		width: 120rpx;
		height: 120rpx;
		image {
			width: 80rpx;
			height: 80rpx;
			// border-radius: 50%;
		}
		.title {
			text-align: center;
			font-size: 30rpx;
			font-weight: bold;
			color: #999;
		}
	}
}
/* 内容 */
.content {
	margin-top: 18rpx;
    border-radius: 24rpx 0!important;
	.tabs {
		border-bottom: 1rpx solid #fafafa;
	}
	.tabsFixed {
		width: 750rpx;
		background-color: #fff;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 2000;
	}
}
</style>
